<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>图片空间</title>
    <link rel="stylesheet" href="../../css/normalize.min.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/bootstrap.cosmo.css">
    <!-- <link rel="stylesheet" href="../../css/bootstrap.cerulean.css"> -->
    <link rel="stylesheet" href="../../plugin/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <!-- <link rel="stylesheet" href="https://bootswatch.com/3/united/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../../plugin/icheck/skins/all.css">
    <link rel="stylesheet" href="../../plugin/icheck/skins/flat/flat.css">
    <link rel="stylesheet" href="../../plugin/layer/skin/default/layer.css">

    <!---->
    <link rel="stylesheet" href="../../plugin/upload/bootstrap-fileinput-master-update/css/fileinput.css">
    <link rel="stylesheet" href="../../plugin/upload/bootstrap-fileinput-master-update/themes/explorer/theme.css">
    <!---->
    <style media="screen">
        .form-group {
            margin-bottom: 0;
        }

        body {
            padding-bottom: 80px;
        }

        #productList tbody td {
            vertical-align: middle;
        }

        .albumBox {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="configNav"></div>

    <div class="container-fluid">
        <div class="row">
            <!--leftcontent start-->
            <div class="col-md-2">
                <div class="list-group">
                    <a href="./com_release.html" class="list-group-item">商品发布</a>
                    <a href="./com_insale.html" class="list-group-item">出售中的商品</a>
                    <a href="./com_warehouse.html" class="list-group-item">仓库中的商品</a>
                    <a href="./com_picspace.html" class="list-group-item active">图片空间</a>
                </div>
            </div>
            <!--leftcontent end-->

            <!--rightcontent start-->
            <div class="col-md-10">
                <ol class="breadcrumb">
                    <li><a href="javascript:void(0)">商家管理中心</a></li>
                    <li><a href="javascript:void(0)">商品</a></li>
                    <li class="active">出售中的商品</li>
                </ol>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="./com_warehouse.html">我的相册</a></li>
                    <!-- <li role="presentation"><a href="./com_warehouse.html">水印管理</a></li> -->
                    <div class="btn-group pull-right btn-group-sm" role="group" aria-label="...">
                        <button type="button" class="btn btn-success" id="btnCreateAlbum" data-toggle="modal" data-target="#createAlbumModal"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;创建相册</button>
                        <button type="button" class="btn btn-danger" id="btnUploadPic" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;上传图片</button>
                    </div>
                </ul>
                <div class="page-header" style="overflow:hidden;zoom:1;margin:10px 0;">
                    <form class="form-inline">
                        <div class="form-group pull-right">
                            <label for="exampleInputName2">排序方式</label>&nbsp;&nbsp;
                            <select class="form-control" id="sortOrder">
                                <option value="1">按排序从大到小</option>
                                <option value="2">按排序从小到大</option>
                                <option value="4">按创建时间从早到晚</option>
                                <option value="3">按创建时间从晚到早</option>
                                <option value="5">按相册名降序</option>
                                <option value="6">按相册名升序</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="row" id="albumList">
                    <!-- <div class="col-sm-6 col-md-4 col-lg-3 albumBox defaultAlbum">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <a href="./com_imglist.html"><img src="https://static.bootcss.com/www/assets/img/stickup.png?1511146481461" alt="..." class="img-responsive img-rounded"></a>
                                <a href="./com_imglist.html">
                                    <p style="margin-top:10px">默认相册</p>
                                </a>
                                <p class="text-muted">共799张</p>
                                <div class="btn-group invisible editBtnGrp" role="group" aria-label="...">
                                    <button type="button" class="btn btn-primary btnEditAlbum" style="margin-right:10px;">编辑</button>
                                    <button type="button" class="btn btn-danger btnDelAlbum">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
<div class="col-sm-6 col-md-4 col-lg-3 albumBox">
<div class="panel panel-default">
<div class="panel-body">
<a href="./com_imglist.html"><img src="https://static.bootcss.com/www/assets/img/stickup.png?1511146481461" alt="..." class="img-responsive img-rounded"></a>
<a href="./com_imglist.html">
<p style="margin-top:10px">默认相册</p>
</a>
<p class="text-muted">共799张</p>
<div class="btn-group invisible editBtnGrp" role="group" aria-label="...">
<button type="button" class="btn btn-primary btnEditAlbum" style="margin-right:10px;">编辑</button>
<button type="button" class="btn btn-danger btnDelAlbum">删除</button>
</div>
</div>
</div>
</div>
                    <div class="col-sm-6 col-md-4 col-lg-3 albumBox">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <a href="./com_imglist.html"><img src="https://static.bootcss.com/www/assets/img/stickup.png?1511146481461" alt="..." class="img-responsive img-rounded"></a>
                                <a href="./com_imglist.html">
                                    <p style="margin-top:10px">默认相册</p>
                                </a>
                                <p class="text-muted">共799张</p>
                                <div class="btn-group invisible editBtnGrp" role="group" aria-label="...">
                                    <button type="button" class="btn btn-primary btnEditAlbum" style="margin-right:10px;">编辑</button>
                                    <button type="button" class="btn btn-danger btnDelAlbum">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>
                <!-- row end -->

                <!-- <table class="table" style="margin-bottom:0">

                </table> -->

            </div>
            <!--rightcontent end-->
        </div>
        <!-- row end -->
    </div>
    <!-- container end -->

    <!-- Modal -->
    <div class="modal fade" id="createAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建相册</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="albumName" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="albumName" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3" id="albumDes"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->


    <!-- Modal -->
    <div class="modal fade" id="updateAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="upAlbumName" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="upAlbumName" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="upAlbumDes" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3" id="upAlbumDes"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnUpAlbum">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->

    <!-- Modal -->
    <div class="modal fade" id="delAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->



    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeodalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="">上传</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">选择相册：</label>
                            <select class="form-control" id="albumsSel">

                            </select>
                        </div>
                    </form><br>
                    <div class="container kv-main" style="width:auto;padding:0">
                        <form enctype="multipart/form-data">
                            <input id="kv-explorer" type="file" name="dUserFile" multiple>
                            <br>
                        </form>
                    </div>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div> -->
            </div>
        </div>
    </div>


    <script src="../../js/jquery.min.js" charset="utf-8"></script>
    <script src="../../js/common.js" charset="utf-8"></script>
    <script src="../../js/nav.js" charset="utf-8"></script>
    <script src="../../js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="utf-8"></script>
    <script src="../../plugin/wangEditor/release/wangEditor.min.js" charset="utf-8"></script>
    <!-- <script src="../js/com_release.js" charset="utf-8"></script> -->
    <script src="../../plugin/icheck/icheck.min.js" charset="utf-8"></script>
    <script src="../../plugin/layer/layer.js" charset="utf-8"></script>
    <script src="../../plugin/layer/layer.js" charset="utf-8"></script>
    <script src="../../js/ajax.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/bootstrap-paginator.js"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/plugins/sortable.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/fileinput.min.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/locales/zh.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/themes/explorer/theme.min.js" charset="utf-8"></script>

    <script type="text/javascript">
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-red',
            radioClass: 'iradio_flat-red'
        });

        $('.deleteCtrl').on('ifChecked', function() {
            $('.comCkeckbox').iCheck('check');
            $('.deleteCtrl').iCheck('check');
        });
        $('.deleteCtrl').on('ifUnchecked', function() {
            $('.comCkeckbox').iCheck('uncheck');
            $('.deleteCtrl').iCheck('uncheck');
        })


        //$('#btnCreateAlbum').click()
        $("#kv-explorer").fileinput({
            'theme': 'fa',
            language: 'zh',
            allowedFileExtensions: ['jpg', 'gif', 'png'],
            maxFileSize: 2048,
            'uploadUrl': serverURL + '/goods/getOssUpload',
            overwriteInitial: false,
            'uploadExtraData': {
                'imgPath': 'goods',
            }
        });

        $("#kv-explorer").on("fileuploaded", function(event, data, previewId, index) {
            console.log(data);
            if (data.response.code == '200') {
                var url = serverURL + '/goods/addAlbumPic';
                data = {
                    'apicName': data.files[index].name,
                    'aclassId': $('#albumsSel').val(),
                    'apicCover': data.response.data.apicCover,
                    'apicSize': data.response.data.apicSize,
                    'apicSpec': data.response.data.apicSpec,
                    // 'storeId': 1
                };
                var cbk = function(res) {
                    console.log(res);
                }
                ajax(
                    url,
                    data,
                    cbk,
                    'post',
                    'json'
                )
            }
            // console.log('上传图片地址：', data.response.dataList);
        });


        //------------------- 相册显示 -------------------
        var albumIdVal;
        pageInit();
        $('#sortOrder').change(function() {
            data.sort = $(this).val();
            pageInit()
        })

        //初始化当前页//
        var page = 1;
        //一页的条数
        var pagesize = 20;

        function pageInit() {
            var albumUrl = serverURL + '/goods/queryAlbumClass'
            data = {
                'page': page,
                'pageSize': pagesize,
                // 'storeId': 1,
                'sort': $('#sortOrder').val()
            };
            ajax(
                albumUrl,
                data,
                pageNumList,
                'post',
                'json'
            )
        }

        function OpendList(res) {
            console.log(res);
            $('#albumList').empty();
            var data = res.data;
            var html = '';
            for (i in data) {
                if (data[i].isDefault == 1) {
                    html += '<div class="col-sm-6 col-md-4 col-lg-3 albumBox defaultAlbum">'
                } else {
                    html += '<div class="col-sm-6 col-md-4 col-lg-3 albumBox">'
                }

                html += '<div class="panel panel-default">' +
                    '<div class="panel-body">' +
                    '<a href="./com_imglist.html?id=' + data[i].aclassId + '"><img src="" alt="..." class="img-responsive img-rounded" style="margin:0 auto;"></a>' +
                    '<a href="./com_imglist.html?id=' + data[i].aclassId + '">' +
                    '<p style="margin-top:10px">' + data[i].aclassName + '</p>' +
                    '</a>'
                if(data[i].num == null){
                    html += '<p class="text-muted">共 0 张</p>'
                }else{
                    html += '<p class="text-muted">共 ' + data[i].num + ' 张</p>'
                }

                html += '<div class="btn-group invisible editBtnGrp" role="group" aria-label="...">' +
                    '<button type="button" class="btn btn-primary btnEditAlbum" data-aclassId="' + data[i].aclassId + '">编辑</button>' +
                    '<button type="button" class="btn btn-danger btnDelAlbum" data-aclassId="' + data[i].aclassId + '">删除</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
            };
            for (n in data) {
                $('#albumsSel').append('<option value="' + data[n].aclassId + '">' + data[n].aclassName + '</option>')
            };
            $('#albumList').append(html);
            $(".albumBox").hover(
                function() {
                    if ($(this).hasClass('defaultAlbum')) {
                        return;
                    }
                    var i = $(this).index();
                    $('.editBtnGrp:eq(' + i + ')').removeClass('invisible');
                },
                function() {
                    $('.editBtnGrp').addClass('invisible');
                }
            );

            $('.btnEditAlbum').on('click', function() {
                albumIdVal = $(this).attr('data-aclassId');
                quertAlbumDetails();
                $('#updateAlbumModal').modal();
            });

            $('.btnDelAlbum').on('click', function() {
                albumIdVal = $(this).attr('data-aclassId');
                delAlbumFunc();
            })
        }

        //创建相册
        $('#btnSubmit').click(function() {
            createAlbumFun()
        })

        function createAlbumFun() {
            if ($('#albumName').val() == '') {
                return;
            }
            var albumUrl = serverURL + '/goods/addAlbumClass';
            data = {
                'aclassName': $('#albumName').val(),
                'aclassDes': $('#albumDes').val(),
                // 'storeId': 1
            };
            ajax(
                albumUrl,
                data,
                pageInit,
                'post',
                'json'
            );
            $('#createAlbumModal').modal('hide')
        }

        //删除相册
        function delAlbumFunc() {
            layer.msg('确定删除？', {
                time: 0 //不自动关闭
                    ,
                btn: ['确定', '取消'],
                yes: function(index) {
                    var delUrl = serverURL + '/goods/deleteAlbumById';
                    data = {
                        'aclassId': albumIdVal
                    };
                    ajax(
                        delUrl,
                        data,
                        pageInit,
                        'post',
                        'json'
                    )
                    layer.close(index);
                }
            });
        }

        //查询详情
        function quertAlbumDetails() {
            var url = serverURL + '/goods/quertAlbumById';
            data = {
                'aclassId': albumIdVal
            };
            var cbk = function(res) {
                console.log(res);
                $('#upAlbumName').val(res.data.aclassName);
                $('#upAlbumDes').val(res.data.aclassDes)
            }
            ajax(
                url,
                data,
                cbk,
                'post',
                'json'
            );
        }

        $('#btnUpAlbum').click(function() {
            if ($('#upAlbumName').val() == '') {
                return;
            }
            var albumUrl = serverURL + '/goods/updateAlbumById';
            data = {
                'aclassName': $('#upAlbumName').val(),
                'aclassDes': $('#upAlbumDes').val(),
                'aclassId': albumIdVal
            };
            ajax(
                albumUrl,
                data,
                pageInit,
                'post',
                'json'
            );
            $('#updateAlbumModal').modal('hide')
        })
        // var aclassId;
        //         $('#albumsSel').change(function () {
        //             console.log($(this).val());
        //             aclassId
        //         })
    </script>
</body>

</html>
